<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-html="msg1"></div>
        <div v-pre>{{msg}}</div>
        <div v-once>{{info}}</div>
        <div><input type="text " v-model="msg" /></div>
        <div>{{num}}</div>
        <button v-on:click="num++">点击1</button>
        <button @click="num++">点击2</button>
        <button @click="handle1">点击3</button>
        <button @click="handle2(123,456,$event)">点击4</button>
        <div @click="handle0">
            <button @click.stop="handle1">点击5</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent="handle3">百度</a>
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '<h1>Hello Vue</h1>',
                info: '黑崎一护',
                num: 0,
            },
            methods: {
                // 事件绑定-参数传递
                // 1.如果事件直接绑定事件名称，那么默认传递事件对象作为事件函数的第一个参数
                // 2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，而且事件对象的名称必须为$event
                handle1: function(event) {
                    // console.log(event.target.innerHTML);
                    // event.stopPropagation()阻止事件的默认行为   或者在@click后加.stop;
                },
                handle2: function(p, p1, p2) {
                    // this指向Vue new出来的实例对象
                    // console.log(this === vm);
                    this.num++;
                    console.log(p2.target.innerHTML);
                },
                handle0: function() {
                    this.num++;
                },
                handle3: function(event) {
                    // event.preventDefault();阻止a链接的跳转
                },
            },
        });
    </script>
</body>

</html>